import React from 'react'
import { View, Image } from 'react-native'
import { Lt, Label, Color, Images, Jx, Jpp, Touch } from "../_utils"
import { eSort } from './_home';

const c_images = [Images.shengjiang, Images.sheng, Images.jiang];
// 排序按钮
class TouchSort extends React.PureComponent{
    render(){
        const {info, act, ...other} = this.props;
        const label = <Label style = {{fontSize:Lt.c16, color: act ? Color.theme : Color.c9}}> {info.field}</Label>
        if(info.simple){
            return <Touch { ...other }>{label}</Touch>;
        }
        return <Touch  { ...other }>
            <View style = {{flexDirection:"row", alignItems:"center"}}>
                {label}
                <Image source = {c_images[info.eud]}/>
            </View>
        </Touch>
    }
}

// 排序组件
export class SortBar extends React.PureComponent{
    constructor(props){
        super(props);
        this.setSorts(this.props, true);
        this.actIdx = 0;
    }

    componentWillReceiveProps(props){
        this.setSorts(props);
    }

    setSorts(props, init){
        let { fields, doubles } = props;
        if(Jx.isUndefined(doubles)){
            doubles = fields.map(v=>false);
        }else if(Jx.isArray(doubles)){
            if(doubles.length < fields.length){
                doubles = fields.map((v, i)=>{
                    return (doubles.indexOf(i) >= 0);
                });
            }
        }else{
            doubles = fields.map((v, i)=>{
                return (i == doubles);
            });
        }
        const sorts = fields.map((v, i)=>{
            return { 
                index : i, 
                field : v, 
                simple : !doubles[i], 
                eud : (i == 0 && doubles[0]) ? eSort.up : eSort.none,
             }
        });
        if(init){
            this.state = {sorts}
            const { onSort } = this.props;
            onSort && onSort(sorts[0])
        }else{
            this.setState({sorts})
        }
    }

    onTouch(actIdx){
        let sorts = [].concat(this.state.sorts);
        const { onSort } = this.props;
        let info = sorts[actIdx];
        if(actIdx == this.actIdx){
            if(info.simple){
                return;
            }
            // sorts[actIdx].eud = 
            info.eud = (info.eud == eSort.down) ? eSort.up : eSort.down;
            this.setState({sorts});
            onSort && onSort(info);
            return;
        }
        sorts[this.actIdx].eud = eSort.none;
        // sorts[actIdx].eud = 
        info.eud = info.simple ? eSort.none : eSort.up;
        this.setState({sorts});
        onSort && onSort(info);
        this.actIdx = actIdx;
    }

    render(){
        const {style} = this.props;
        const {sorts} = this.state;
        return <View style = {{
            width:Jpp.width, 
            flexDirection:"row",
            justifyContent:"space-around", 
            alignItems:"center", 
            marginVertical : Lt.margin,
            ...style,
        }}>
        {
            sorts.map((v, i)=>{
                return <TouchSort
                    key = {i} 
                    info = {v}
                    act = {i == this.actIdx}
                    onPress = {this.onTouch.bind(this, i)}
                />
            })
        }
        </View>
    }
}